﻿<style>
    .angular-ui-tree-handle {
        background: #f8faff;
        border: 1px solid #dae2ea;
        color: #7c9eb2;
        padding: 10px 10px;
        line-height: 26px;
    }

        .angular-ui-tree-handle:hover {
            color: #438eb9;
            background: #f4f6f7;
            border-color: #dce2e8;
        }

    .angular-ui-tree-placeholder {
        background: #f0f9ff;
        border: 2px dashed #bed2db;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    tr.angular-ui-tree-empty {
        height: 100px
    }

    .group-title {
        background-color: #687074 !important;
        color: #FFF !important;
    }

    .tree-node {
        border: 1px solid #dae2ea;
        background: #f8faff;
        color: #7c9eb2;
    }

    .nodrop {
        background-color: #f2dede;
    }
    .tree-handle {
        padding: 10px;
        background: #428bca;
        color: #FFF;
        margin-right: 10px;
    }

    .angular-ui-tree-placeholder {
        background: #f0f9ff;
        border: 2px dashed #bed2db;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    body {
        overflow-x: hidden;
    }
</style>
<script type="text/ng-template" id="nodes_renderer.html">
    <div ui-tree-handle class="tree-node tree-node-content">
        <div class="row">
            <div class="col-sm-2">
                <a class="btn btn-success btn-xs waves-effect" ng-if="node.Children && node.Children.length > 0" data-nodrag ng-click="toggle(this)" style="margin-right:5px;">
                    <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>
                </a>
                <a ng-href="{{node.Url}}" style="font-size:16px;" target="_blank">{{node.Id}}：{{node.Name}}</a>
            </div>
            <div class="col-sm-2">
                类型：{{MenuType[node.MenuType].name}}
            </div>
            <div class="col-sm-1">
                排序：{{node.Sort}}
            </div>
            <div class="col-sm-2">
                URL：{{node.Url}}
            </div>
            <div class="col-sm-3" ng-if="node.Icon">
                图标URL：<img style="height:30px;" ng-src="{{node.Icon}}"/>
                {{node.Icon}}
            </div>
            <div class="col-sm-2">
                <div class="btn-group">
                    <a class="pull-right btn btn-danger waves-effect" data-nodrag ng-click="del(this)">
                        <span class="glyphicon glyphicon-remove"></span>
                    </a>
                    <a class="pull-right btn btn-info waves-effect" data-nodrag ng-click="edit(node)">
                        <span class="glyphicon glyphicon-edit"></span>
                    </a>
                    <a class="pull-right btn btn-primary waves-effect" data-nodrag ng-click="newSubItem(this)" ng-if='node.Url == "#"||node.Url == ""'>
                        <span class="glyphicon glyphicon-plus"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <ol ui-tree-nodes="" ng-model="node.Children" ng-class="{hidden: collapsed}" class="animated fadeIn">
        <li ng-repeat="node in node.Children" ui-tree-node ng-include="'nodes_renderer.html'"></li>
    </ol>
</script>
<h1>导航菜单管理</h1>
<div class="row">
    <div class="col-md-12">
        <div class="form-inline m-b-5">
            <div class="btn-group">
                <button class="btn btn-success waves-effect" ng-click="expandAll()">展开/收起所有</button>
                <button class="btn btn-info waves-effect" ng-click="newItem()">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
                <button class="btn btn-primary waves-effect" ng-click="init()">
                    <span class="glyphicon glyphicon-refresh"></span>
                </button>
            </div>
            <div class="pull-right">
                <div class="input-group">
                    <span class="input-group-addon">
                        搜索：
                    </span>
                    <div class="fg-line">
                        <input ng-model="query" ng-change="findNodes()" type="search" class="form-control pull-right" placeholder="搜索">
                    </div>
                </div>
            </div>
        </div>
        <div data-ui-tree="treeOptions" id="tree-root">
            <ol data-ui-tree-nodes ng-model="data" class="animated fadeIn">
                <li data-ng-repeat="node in data" data-ui-tree-node ng-include="'nodes_renderer.html'" ng-show="visible(node)"></li>
            </ol>
        </div>
    </div>
</div>

<div id="modal" class="modal">
    <div class="container-fluid" style="margin: 15px 0;">
        <div class="bgm-white">
            <div class="input-group">
                <span class="input-group-addon">
                    菜单名：
                </span>
                <div class="fg-line">
                    <input type="text" class="form-control" id="menu-name" ng-model="menu.Name" />
                </div>
            </div>
            <div class="input-group">
                <span class="input-group-addon">
                    URL地址：
                </span>
                <div class="fg-line">
                    <input type="text" class="form-control" id="menu-url" ng-model="menu.Url" />
                </div>
            </div>
            <div class="input-group">
                <span class="input-group-addon">
                    排序号：
                </span>
                <div class="fg-line">
                    <input type="number" class="form-control" id="menu-sort" ng-model="menu.Sort" />
                </div>
            </div>
            <div class="input-group">
                <span class="input-group-addon">菜单类型：</span>
                <select class="form-control" ng-model="menu.MenuType" ng-options="m.e as m.name for m in MenuType">
                    <option value="">请选择菜单类型</option>
                </select>
            </div>
            <div style="padding-left: 12px;">
                <label class="el-switch el-switch-sm">
                    <span style="color: black;font-size: 16px;vertical-align: super;margin-right: 10px;">新标签页打开：</span>
                    <input type="checkbox" ng-model="menu.NewTab" />
                    <span class="el-switch-style"></span>
                </label>
            </div>
            <div class="input-group">
                <label for="desc" class="input-group-addon control-label">图标地址：</label>
                <div class="fg-line">
                    <input type="text" class="form-control" id="desc" placeholder="请输入头标URL" ng-model="menu.Icon">
                </div>
                <span class="input-group-btn">
                    <button class="btn btn-success" ng-click="upload()">上传本地图片</button>
                </span>
            </div>
            <form id="uploadform" onsubmit="return false" enctype="multipart/form-data" ng-show="allowUpload">
                <div class="file-box">
                    <div class="input-group">
                        <span class="input-group-addon">上传图片：</span>
                        <div class="fg-line">
                            <input type="text" name="file0" disabled class="form-control" placeholder="请选择一张图片" />
                        </div>
                        <span class="input-group-btn hidden">
                            <a href="javascript:void(0);" class="btn btn-info ">浏览</a>
                        </span>
                        <input type="file" class="uploadFile" name="file" onchange="getFile(this, 'file0')" />
                        <span class="input-group-btn"><button type="button" class="btn btn-primary" ng-click="uploadImage()"> 开始上传图片 </button></span>
                    </div>
                </div>
            </form>
            <div class="btn-group">
                <button type="button" class="btn btn-info waves-effect" ng-click="submit(menu)">确认</button>
                <button type="button" class="btn btn-danger waves-effect" ng-click="closeAll()">取消</button>
            </div>
        </div>
    </div>
</div>